<template>
  <div class="fillcontain">
    <div class="filter-container">
      <div style="display:inline-block;vertical-align:top;">
        <el-upload
          class="upload-demo"
          drag
          :action="upload_url"
          multiple
          :show-file-list="showUploadFileList"
          :on-success="uploadSuccess"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
        </el-upload>
      </div>

      <div style="display:inline-block;vertical-align:top;margin-left:20px">
        <p>上传文件格式如图（性别0代表女，1代表男）:</p>
        <img width="1000" :src="'robot_file.png'|imgUrl" />
      </div>
    </div>

    <div class="app-container calendar-list-container">
      <el-table
        :data="list"
        border
        fit
        highlight-current-row
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        ref="sort"
      >
        <el-table-column align="center" label="内部ID">
          <template slot-scope="scope">
            <span class="uid-click" @click="$UserInfoPopUp.install(scope.row.uid)">{{ scope.row.uid }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="昵称">
          <template slot-scope="scope">
            <span>{{ scope.row.nickname }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | parseTime }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="签名">
          <template slot-scope="scope">
            <span>{{ scope.row.signature }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="性别">
          <template slot-scope="scope">
            <span>{{ scope.row.sex|sex }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="头像">
          <template slot-scope="scope">
            <span class="img-wrap">
              <img :src="imgHost + scope.row.avatar" />
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <TablePagination
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :current-page="listQuery.page"
      :limit="listQuery.limit"
      :total="total"
      :loading="listLoading"
    ></TablePagination>
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import UploadFile from '@/components/UploadFile'
export default {
  components: { TablePagination, UploadFile },
  data() {
    return {
      showUploadFileList: false,
      upload_url: process.env.API_ROOT + 'robot/excel',
      fileList: [],
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        status: '',
        offset: 0,
        limit: 20
      }
    }
  },

  created() {
    this.getList()
  },
  methods: {
    uploadSuccess(res, file, fileList) {
      if (res && res.message == 'OK') {
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.getList()
      }
    },
    getList() {
      this.listLoading = true
      this.$get('robot/list', this.listQuery).then(resp => {
        this.listLoading = false
        this.list = resp.data.robot_list
        this.total = resp.data.count
      })
    }
  }
}
</script>
